<script setup lang="ts">
import { ref } from 'vue'
import PulpingMachine2D from '@/components/device/PulpingMachine2D.vue'
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'
use([
  CanvasRenderer,
  GridComponent,
  LineChart,
  TooltipComponent,
  LegendComponent,
  TitleComponent,
  VisualMapComponent
])

interface DataItem {
  name: string
  value: [string, number]
}

function randomData(): DataItem {
  now = new Date(+now + oneDay)
  value = value + Math.random() * 21 - 10
  return {
    name: now.toString(),
    value: [[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value)]
  }
}

let data = ref<DataItem[]>([])
let now = new Date(1997, 9, 3)
let oneDay = 24 * 3600 * 1000
let value = Math.random() * 1000
for (var i = 0; i < 1000; i++) {
  data.value.push(randomData())
}

const option = {
  title: {
    text: 'Dynamic Data & Time Axis'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function (params: any) {
      params = params[0]
      var date = new Date(params.name)
      return (
        date.getDate() +
        '/' +
        (date.getMonth() + 1) +
        '/' +
        date.getFullYear() +
        ' : ' +
        params.value[1]
      )
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: 'Fake Data',
      type: 'line',
      showSymbol: false,
      data: data.value
    }
  ]
}

setInterval(function () {
  for (var i = 0; i < 5; i++) {
    data.value.shift()
    data.value.push(randomData())
  }
}, 1000)
</script>

<template>
  <main class="main-container">
    <div class="search-container">
      <el-text type="info" class="mx-1">项目名称:</el-text>
      <div style="margin-left: 8px">
        <el-select style="width: 240px">
          <!-- <el-option
            v-for="item in partHomeStore.projectNames"
            :key="item"
            :label="item"
            :value="item"
          /> -->
        </el-select>
      </div>
    </div>
    <el-scrollbar class="content-container">
      <div
        style="
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
        "
      >
        <v-chart :option="option" style="width: 50%; height: 600px" class="chart"></v-chart>
      </div>
    </el-scrollbar>
  </main>
</template>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.content-container {
  padding: 30px 30px 20px;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  height: 100%;
}

.search-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
}
</style>
